<template>
    <el-container>
        <el-main class="menu-wrapper">
            <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
                <el-form-item label="活动商品" prop="productName">
                    <product-choose style="width:400px;" @chooseProduct="chooseProduct"></product-choose>
                    <!-- <el-select style="width:400px;" v-model="addPromotion.productName" value-key="id" placeholder="请选择商品" filterable :filter-method="getProductList" @change="changeProduct">
                        <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="活动描述" prop="title">
                    <el-input v-model="addPromotion.title" style="width:400px;" placeholder="如消费满100元生效"></el-input>
                </el-form-item>
                <el-form-item label="起止日期" prop="dateTime">
                    <el-date-picker v-model="addPromotion.dateTime" style="width:400px;" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <div style="display: flex">
                    <el-form-item label="购买数量" prop="minimumPrice" v-if="addPromotion.type===7">
                        <el-input style="width:200px;" v-model="addPromotion.minimumPrice" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent placeholder="如消费满100元生效"></el-input>
                    </el-form-item>
                    <el-form-item :label="addPromotion.type|watchlabeltype" prop="amount" v-if="addPromotion.type===7||addPromotion.type===8||addPromotion.type===10">
                        <el-input style="width:200px;" v-model="addPromotion.amount" @mousewheel.native.prevent @DOMMouseScroll.native.prevent type="number"></el-input>
                    </el-form-item>
                </div>

                <div style="display: flex">
                    <el-form-item label="商品库存" prop="stock">
                        <el-input style="width:200px;" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="addPromotion.stock" placeholder="请输入库存"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="firsted" v-if="addPromotion.type!=10">
                        <el-checkbox v-model="addPromotion.firsted">只适用于首单生效</el-checkbox>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="参与会员">
                        <el-select style="width:400px;" v-model="vipsvalue" multiple filterable allow-create default-first-optionplaceholder="请选择可参与会员" @change="vipschanges">
                            <el-option v-for="item in vipslist" :key="item.id" :label="item.name" :value="item.vip"></el-option>
                        </el-select>

                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="参与城市">
                        <queryCascader style="width:400px;" @queryCascaderclick=queryCascaderclick></queryCascader>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-col :span="12">
                        <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>
<script>
import { list as productList } from "@/api/product";
import { save } from "@/api/promotion";
import { EventBus } from "@/api/eventBus";
import { list } from "@/api/vip";
import queryCascader from "@/components/Query/queryCascader";
import productChoose from "../components/product.vue"
export default {
    name: "thesecond-add",
    data() {
        return {
            vipslist: [], //获取vip列表
            vipsvalue: [],
            goods: "",
            clicked: false,
            rules: {
                type: [
                    {
                        required: true,
                        message: "请输入选择类型",
                        trigger: "change",
                    },
                ],
                agioRate: [
                    {
                        required: true,
                        message: "请输入满减比例",
                        trigger: "blur",
                    },
                ],
                amount: [
                    { required: true, message: "请输入金额", trigger: "blur" },
                ],
                minimumPrice: [
                    { required: true, message: "请输入数量", trigger: "blur" },
                ],
                stock: [
                    { required: true, message: "请输入库存", trigger: "blur" },
                ],
                productName: [
                    {
                        required: true,
                        message: "请选择活动商品",
                        trigger: "change",
                    },
                ],
                dateTime: [
                    {
                        required: true,
                        message: "请选择活动时间",
                        trigger: "change",
                    },
                ],
                integer: [
                    {
                        required: true,
                        message: "请输入优先级",
                        trigger: "blur",
                    },
                ],
                introduction: [
                    {
                        required: true,
                        message: "请输入促销说明",
                        trigger: "blur",
                    },
                ],
            },
            productOptions: [],
            addPromotion: {
                dateTime: [],
                productName: "",
                givenAmount: 0,
                agioRate: 0,
                amount: 0,
                createDate: "",
                stock: "",
                firsted: false,
                giftType: "",
                gifts: [],
                introduction: "",
                minimumPrice: 0,
                goodsId: "",
                modifyDate: "",
                orders: 0,
                overlying: false,
                thumbnail: "",
                title: "",
                type: 9,
                vips: "",
                areaList: "",
            },
        };
    },
    components: {
        queryCascader,
        productChoose
    },
    methods: {
        queryCascaderclick(data) {
            this.addPromotion.areaList = data;
        },
        vipschanges(val) {
            this.addPromotion.vips = "";
            val.forEach((item) => {
                this.addPromotion.vips += item;
            });
        },
        loadVip() {
            list().then((res) => {
                console.log(res);
                this.vipslist = res.data.data;
            });
        },
        change(e) {
            console.log(this.goods);
            this.addPromotion.goodsId = e.goodsId;
            console.log(this.addPromotion.goodsId);
        },
        getProductList(query) {
            // 加载商品
            productList({ keyword: query, pageSize: 20, isList: true })
                .then((res) => {
                    this.$set(this.$data, "productOptions", res.data.data);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        chooseProduct(data){
            console.log('1121212')
            this.addPromotion.goodsId = data.goodsId;
            this.addPromotion.productName = data.name;
            console.log(this.addPromotion)
        },
        changeProduct(data) {
            this.addPromotion.goodsId = data.goodsId;
            this.addPromotion.productName = data.name;
        },
        savePromotion(addPromotion) {
            if (this.addPromotion.type === "") {
                this.clicked = false;
            }
            this.$refs[addPromotion].validate((valid) => {
                if (valid) {
                    this.clicked = true;

                    var addPromotion = {
                        agioRate: this.addPromotion.agioRate,
                        amount: this.addPromotion.amount,
                        createDate: new Date(),
                        firsted: this.addPromotion.firsted,
                        giftType: this.addPromotion.giftType,
                        gifts: [],
                        stock: this.addPromotion.stock,
                        introduction: this.addPromotion.introduction,
                        minimumPrice: this.addPromotion.minimumPrice,
                        modifyDate: new Date(),
                        beginDate: "",
                        endDate: "",
                        status: 0,
                        goodsId: this.addPromotion.goodsId,
                        orders: this.addPromotion.orders,
                        overlying: this.addPromotion.overlying,
                        thumbnail: this.addPromotion.thumbnail,
                        title: this.addPromotion.title,
                        type: this.addPromotion.type,
                        vips: this.addPromotion.vips,
                        areaList: this.addPromotion.areaList,
                    };
                    if (this.addPromotion.dateTime.length > 0) {
                        addPromotion.beginDate = this.addPromotion.dateTime[0];
                        addPromotion.endDate = this.addPromotion.dateTime[1];
                    }
                    if (this.addPromotion.type == 11) {
                        addPromotion.gifts = this.$refs.couponAdd.coupons;
                        addPromotion.giftType = 1;
                    }

                    save(addPromotion)
                        .then((response) => {
                            this.$store
                                .dispatch("tagsView/delView", this.$route)
                                .then(({ visitedViews }) => {
                                    this.$router.push({
                                        path: "/thesecond/list",
                                    });
                                });
                            EventBus.$emit("thesecond-add", response.data);
                            this.clicked = false;
                        })
                        .catch((error) => {
                            this.clicked = false;
                            console.log("error");
                        });
                } else {
                    this.clicked = false;
                }
            });
        },
    },
    created() {
        this.loadVip();
        this.getProductList();
    },
    filters: {
        watchlabeltype(val) {
            if (val === 7) {
                return "赠送数量";
            } else if (val === 8) {
                return "秒杀价格";
            } else if (val === 10) {
                return "新人价";
            }
        },
    },
};
</script>

<style scoped>
</style>
